<template>
	<view class="">
		<w-navbar title="选择售后商品" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container>
			<template>
				<view class="content">
					<view class="shopping_list">
						<view @click="checkGoods(item)" class="shopping_item fr-ac" v-for="(item,index) in goods_cart_info" :key="index">
							<view class="fr-ac-jc check_box" :style="{'borderColor':item.isCheck?PUBLIC_STYLE.color:'','backgroundColor':''}">
								<view v-show="item.isCheck" class="iconfont icon-select-bold" :style="{'color': PUBLIC_STYLE.color}"></view>
							</view>
							<view class="item_img">
								<image :src="ossURL + item.image" mode=""></image>
							</view>
							<view class="item_content">
								<view class="goods_name">
									{{item.title}}
								</view>
								<view class="fr-ac">
									<view class="goods_size">
										{{item.attrdata}}
									</view>
									<view class="goods_size">
										数量x{{item.nums}}
									</view>
								</view>
								<view class="fr-ac-jsb">
									<view class="" style="position: relative;">
										<text class="goods_price">
											￥{{countTotalPrice(item.price,item.nums)}}
										</text>
									</view>
								</view>
								
							</view>
						</view>
						<view class="" style="height: 200rpx;">
							
						</view>
					</view>
					<template>
						<u-popup :show="showApply" @close="showApply = false" :closeable="true">
							<view class="popup_box">
								<view class="title">
									申请售后
								</view>
								
								<view class="title_box fr-ac-jsb">
									<view class="text">
										售后类型
									</view>
								</view>
								<view class="gooods_size frw">
									<view @click="after_sale_form.aftersales_type_current=item" class="gooods_size_item" :class="after_sale_form.aftersales_type_current.value == item.value?'check':''" v-for="(item,index) in after_sale_form.aftersales_type" :key="index">
										{{item.name}}
									</view>
								</view>
								<view class="title_box fr-ac-jsb">
									<view class="text">
										售后理由
									</view>
								</view>
								<view class="size_name">
									<textarea v-model="after_sale_form.aftersales_reason" placeholder="填写售后理由" name="" id="" cols="30" rows="10"></textarea>
								</view>
								<view class="title_box fr-ac-jsb">
									<view class="text">
										添加图片
									</view>
								</view>
								<view class="fw">
									<view v-if="after_sale_form.aftersales_images.length<3" @click="imageChoose" class="add_img">
										<view class="">
											<view class="iconfont icon-tubiaotuku"></view>
										</view>
										<view class="add_text">
											点击添加图片
										</view>
									</view>
									<template v-if="after_sale_form.aftersales_images.length">
										<image class="add_img" :src="item.fullurl"
											mode="" style="border: none;" v-for="(item,index) in after_sale_form.aftersales_images"></image>
									</template>
								</view>
								<view class="shopping fw">
									<view class="confirm" @click="aftersalesConfirm">
										确认
									</view>
								</view>
							</view>
						</u-popup>
					</template>
				</view>
				<view class="bottom_box fr-ac-jsb">
					<view @click="checkAllgoods" class="fr-ac">
						<view class="fr-ac-jc check_box" :style="{'borderColor':isAllCheck?PUBLIC_STYLE.color:'','backgroundColor':''}">
							<view v-show="isAllCheck" class="iconfont icon-select-bold" :style="{'color': PUBLIC_STYLE.color}"></view>
						</view>
						<view class="ml-20 mb-5">
							全选
						</view>
					</view>
					
					<view class="fr-ac">
						<view class="text">
							已选{{countGoodsCheck}}件合计:
						</view>
						<view class="price">
							￥{{countAllTotalPrice}}
						</view>
						<view @click="applyAfterSale" class="buy">
							申请售后
						</view>
					</view>
				</view>
			</template>
		</w-container>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAllCheck:false,
				
				goods_cart_info:[],
				
				order_sn:'',
				
				showApply:false,
				
				after_sale_form:{
					aftersales_type:[
						{
							name:'退货',
							value:1
						},
						{
							name:'补发',
							value:2
						},
						{
							name:'换货',
							value:3
						},
					],
					aftersales_type_current:{},
					aftersales_reason:'',
					aftersales_images:[],
					aftersales_item:{},
				},
			}
		},
		computed:{
			countAllTotalPrice(){
				let count = 0
				if(this.goods_cart_info.length){
					this.goods_cart_info.map((item,index)=>{
						if(item.isCheck){
							count += Number(item.price) *  Number(item.nums) 
						}
					})
				}
				return count.toFixed(2)
			},
			countGoodsCheck(){
				return this.goods_cart_info.filter(item => item.isCheck).length
			},
		},
		onLoad(options) {
			this.order_sn = options.order_sn
			
			this.get_goods_cart()
		},
		onShow() {
		},
		methods: {
			//复制文本
			copy(str) {
				uni.setClipboardData({
					data: str,
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail: function(err) {
						console.log(err, 'fail');
					},
					complete: function(res) {
						console.log(res, 'complete');
					}
				});
			},
			//预览图片
			showEnlarge(urls) {
				uni.previewImage({
					current: 0, //当前预览图片url
					urls, //需要预览的图片链接列表
					loop: true //是否可循环预览
				})
			},
			//计算总价
			countTotalPrice(price,num){
				return ( Number(price) *  Number(num) ).toFixed(2)
			},
			//获取商品列表
			async get_goods_cart() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.after_sales/get_goods_list',
					data: {
						order_sn:this.order_sn
					},
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.goods_cart_info = res.data.order_list.map(e => ({...e,isCheck:false}))
				}
			},
			applyAfterSale(item){
				let ids = this.getIds().toString()
				console.log(ids)
				if(!ids){
					return uni.showToast({
						title:'请至少选择一个商品',
						icon:'none'
					})
				}
				this.showApply = true
				this.after_sale_form.aftersales_item = item
			},
			imageChoose() {
				uni.chooseImage({
					count: 1, // 最大选择的张数，默认是九张，可以不写
					success: res => {
						console.log(res);
						// 接受选择的图片数组
						console.log(res.tempFiles)
						this.uploadImage(res.tempFiles[0].path)
					},
					fail: (err) => {
						console.log(err, '图片选择失败')
					}
				})
			},
			//上传图片
			async uploadImage(filePath) {
				console.log(filePath, 'filePath')
				uni.showLoading({
					title: '飞速加载中...'
				})
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.baseURL + '/addons/shop/api.common/upload', //后端接口地址，后端解决了oss相关密钥获取
						filePath: filePath,
						name: 'file',
						fileType: 'image',
						header: {
							token: this.User_Info.token,
							'content-type': 'multipart/form-data'
						},
						formData: {
							source: 2, //1-商品图片 2-售后图片
							file: filePath
						},
						success: (res) => {
							uni.hideLoading()
							let oss_info = JSON.parse(res.data).data
							if(this.after_sale_form.aftersales_images.length<3){
								this.after_sale_form.aftersales_images.push(oss_info)
							}
						},
						fail: (res) => {
							console.log(res, 'fail');
							uni.hideLoading()
						},
					});
				})
			},
			async aftersalesConfirm(){
				if(!this.after_sale_form.aftersales_type_current.value){
					return uni.showToast({
						title: '请选择售后类型',
						icon: 'none'
					})
				}
				if(!this.after_sale_form.aftersales_reason){
					return uni.showToast({
						title: '请输入售后理由',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '飞速加载中...'
				})
				let remark_img = ''
				remark_img = this.after_sale_form.aftersales_images.map((e)=>e.url).toString()
				
				const res = await this.$http({
					url: '/addons/shop/api.after_sales/apply_after_sale',
					data: {
						remark:this.after_sale_form.aftersales_reason,
						remark_img:remark_img,
						goods_id:this.getIds().toString(),
						aftersales_type:this.after_sale_form.aftersales_type_current.value,
						order_sn:this.order_sn
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showModal({
						title:'提示',
						content:'申请成功！',
						showCancel:false,
						success: (res) => {
							if(res.confirm){
								uni.reLaunch({
									url:'/pages/order/my_order'
								})
							}
						}
					})
				}
			},
			
			
			checkAllgoods(){
				this.isAllCheck = !this.isAllCheck
				this.goods_cart_info.map(item => {
					item.isCheck = this.isAllCheck
				})
			},
			checkGoods(item){
				item.isCheck = !item.isCheck
			},
			getIds(){
				let ids = this.goods_cart_info.map(item => {
					if(item.isCheck){
						return item.goods_id
					}
				}) || []
				return ids
			},
		}
			
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		position: relative;
		background-color: rgb(250,250,252);
		overflow: scroll;
	}
	
	
	.top_box{
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		background-color: white;
	}
	
	.bottom_box{
		width: 100%;
		position: sticky;
		bottom: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		padding-bottom: 60rpx;
		background-color: white;
		
		.text{
			color: #aaa;
		}
		
		.price{
			margin: 0 20rpx;
			color: red;
		}
		.buy{
			background-color: $theme-color;
			color: white;
			text-align: center;
			padding: 10rpx 50rpx;
			border: 2rpx solid transparent;
		}
		
		.delete{
			background-color: white;
			color: $theme-color;
			text-align: center;
			padding: 10rpx 50rpx;
			border: 2rpx solid $theme-color;
		}
		
	}
	
	.shopping_list{
		width: 100%;
		
		.shopping_item{
			$size: 180rpx;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 20rpx;
			background-color: white;
			
			.item_img{
				margin: 0 20rpx;
				width: $size;
				height: $size;
				
				image{
					width: $size;
					height: $size;
				}
			}
			.item_content{
				flex: 1;
				height: $size;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.goods_price{
					color: red;
					font-weight: bold;
				}
				.goods_price_native{
					font-size: 22rpx;
					text-decoration: line-through
				}
				
				.goods_name{
					font-weight: bold;
				}
				
				.goods_size{
					margin-right: 20rpx;
					width: 35%;
					text-align: center;
					padding: 4rpx 0;
					background-color: rgb(246,246,246);
					color: #aaa;
					font-size: 24rpx;
				}
				
				.goods_detail{
					color: #aaa;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.check_box{
		$size:32rpx;
		width: $size;
		height: $size;
		min-width: $size;
		min-height: $size;
		border-radius: 50%;
		padding: 4rpx;
		
		box-sizing: border-box;
		border: 2rpx solid #888;
		.iconfont{
			font-size: 24rpx;
			line-height: $size;
		}
	}
	
	.popup_box {
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		background-color: white;
	
		.title {
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
	
		.size_name {
			border: 3rpx solid black;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
		}
	
	
		.gooods_size {
	
			.gooods_size_item {
				width: 21%;
				margin: 10rpx 2%;
				padding: 8rpx 0;
				text-align: center;
				border: 2rpx solid #eee;
				
				&.check {
					background-color: $theme-color;
					color: white;
				}
			}
			
			
		}
	
		.title_box {
			margin: 30rpx 0;
	
			.text {
				font-weight: bold;
			}
		}
	
		.shopping {
			margin-top: 40rpx;
			width: 100%;
			height: 70rpx;
	
			.confirm {
				line-height: 70rpx;
				text-align: center;
				width: 100%;
				background-color: $theme-color;
				color: white;
			}
		}
		
		.add_img {
			margin: 40rpx 0;
			width: 200rpx;
			height: 200rpx;
			border: 2rpx dashed #eee;
		
			image {
				margin: 15rpx 40rpx;
				width: 120rpx;
				height: 120rpx;
			}
		
			.iconfont {
				width: 120rpx;
				height: 120rpx;
				line-height: 120rpx;
				margin: 15rpx 40rpx;
				text-align: center;
				font-size: 70rpx;
				color: #888;
			}
		
			.add_text {
				font-size: 24rpx;
				color: #888;
				text-align: center;
			}
		}
	}
</style>